<template>
    <div style="width:1920px">
        <div class="head">
            <span>管理员页面</span>
            <span>欢迎 {{name}}</span>
            <a href="#" @click="quit">注销登录</a>
        </div>
        <div class="mid">
            <Menu :theme="theme3" v-model="theme3" active-name="1"  class="pagectr">
            <!-- <MenuGroup title=""> -->
                <MenuItem name="1" >
                    <span @click="showpower">权限管理</span>
                </MenuItem>
                <MenuItem name="2">
                    <span></span> 
                </MenuItem>
                <MenuItem name="3">
                    <span></span> 
                </MenuItem>
                <MenuItem name="4">
                   <span></span> 
                </MenuItem>
            <!-- </MenuGroup> -->
            </Menu>
            <div class="btns"  v-show="pagepower">
                <Button type="warning">保存</Button>
                <Button type="warning">同步</Button>
            </div>
            <Table class="power"  border :columns="columns7" :data="data6" v-show="pagepower"></Table>
        </div>
       
    </div>
</template>
<style>
    body{font-size:16px}
    ul{padding:0;}
    ul li{list-style: none}
    .head{
        /* margin: 0 auto; */
        text-align: center
    }
    .mid{
        position: relative;
    }
    .pagectr{
        position: absolute;
        top: 0;
        left: 2%;
    }
    .power{
        width: 63%;
        position: absolute;
        top: 50px;
        left: 15%;
    }
    .power .ivu-table{
        width:100%;
    }
    .btns{
        position: absolute;
        top:0;
        left: 15%;
    }
</style>

<script>
import { setCookie,getCookie,delCookie } from '../assets/cookie.js'
    export default {
       data(){
            return{
                pagepower:false,
                social:'',
                theme3: 'dark',
                name:'',
                columns7: [
                    {
                        title: '成员',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '发布课程',
                        key: 'release'
                    },
                    {
                        title: ' 代报名',
                        key: 'enrolment'
                    },
                    {
                        title: '报表',
                        key: 'enroll'
                    }
                ],
                data6: [
                    {
                        name: 'A',
                        release: '√',
                        enrolment:'√',
                        enroll:'√'
                    }
                ]
            }
       },
       mounted(){
            /*页面挂载获取保存的co
            /*页面挂载获取保存的cookie值，渲染到页面上*/
            var uname = getCookie('mobile')
            this.name = uname
            /*如果cookie不存在，则跳转到登录页*/
            if(uname == ""){
                this.$router.push('/')
            }
            // this.$http.post('url', 
            //     // { headers: {
            //     //     "Access-Control-Allow-Origin": "*",
            //     // }}
            //     ).then((res)=>{
            //     this.list = res.data;
            //     console.log(res)
            // })
       },
        methods:{
            quit(){
                /*删除cookie*/
                //delCookie('mobile')
                //this.$router.push('/login')//前端，无后端响应
                var mobile = getCookie('mobile')
                // var params = new URLSearchParams()
                // params.append('',mobile);
                var data = {'mobile':mobile}
                // 发送一个 POST 请求
                var self = this;
                this.$http.delete('http://localhost:7777/users/session/'+data.mobile,
                //如果服务端将参数当做 java对象来封装接收则 参数格式为：{data: param}
                //如果服务端将参数当做url 参数 接收，则格式为：{params: param}，这样发送的url将变为http:www.XXX.com?a=..&b=..
                // {params:params},
                // { headers: {
                // "Access-Control-Allow-Origin": "*",
                // }}
                ).then(function (res) {
        　　       //请求成功
                    console.log(res)
                    console.log(res.data.code)
                    if(res.data.code == 4){
                        delCookie('mobile')
                        setTimeout(function(){
                            self.$router.push('/')
                        }.bind(self),1000)
                    }else{
                       //登出失败时。。。
                    }
                }).catch(function (error) {
            　　  //请求失败
                });
            },
            showpower(){
                    this.pagepower=true;
                   
            }
        } 
    }
</script>

